<template>
    <div class="sdy-home-hot">
      <div class="top">
        <span>京东秒杀</span>
        <p>
          <span>{{ hours < 10 ? '0' + hours : hours }}</span> :
          <span>{{ minutes < 10 ? '0' + minutes : minutes }}</span> :
          <span>{{ seconds < 10 ? '0' + seconds : seconds }}</span>
        </p>
        <span>按钮</span>
      </div>
      <div class="content">
        <ul>
          <li
            v-for="item in hotList"
            :key="item.proid">
            <img :src="item.img1" alt="">
            <span>{{ item.sales }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { Dialog } from 'vant'
  import { hotListApi } from '@/api/goods'
  import { ref, onMounted, watch } from 'vue'
  import type { MyHotItem } from '@/config/interface'
  
  const hotList = ref<MyHotItem[]>([])
  
  // 倒计时逻辑
  // 定义一个倒计时的时间
  // 注意: 将来你从服务器获取的是 时间戳
  const ms = ref<number>(23456)
  
  // 开启定时器来操作 ms
  const timer = setInterval(() => ms.value--, 1000)
  
  // 准备小时分钟秒的变量
  const hours = ref<number>(0)
  const minutes = ref<number>(0)
  const seconds = ref<number>(0)
  
  const watchHandler = () => {
    // 换算
    hours.value = Math.floor(ms.value / (60 * 60))
    minutes.value = Math.floor(ms.value % (60 * 60) / 60)
    seconds.value = ms.value % 60
  
    if (ms.value <= 0) {
      clearInterval(timer)
      Dialog.alert({ title: '秒杀', message: '秒杀已经开始, 开来吧', theme: 'round-button', })
    }
  }
  
  // 监控一下 ms 的变化
  watch(ms, watchHandler)
  
  
  onMounted(async () => {
    watchHandler()
    const res = await hotListApi({ limitNum: 10 })
    hotList.value = res.data
  })
  
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/variable.scss';
  .sdy-home-hot {
    height: 180px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    // background-color: #ccc;
    background-clip: content-box;
  
    > .top {
      height: 50px;
      background: url() no-repeat;
      background-size: 100% 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 10px;
  
      > p {
        display: flex;
        margin-right: 150px;
        align-items: center;
        height: 30px;
  
        > span {
          background-color: $globalColor;
          padding: 2px 3px;
          font-size: 12px;
          color: #fff;
          margin: 0 2px;
          border-radius: 5px;
          overflow: hidden;
        }
      }
    }
  
    > .content {
      flex: 1;
      overflow-x: auto;
  
      // 去掉滚动条
      &::-webkit-scrollbar { width: 0 }
  
      ul {
        display: flex;
        height: 100%;
  
        > li {
          height: 100%;
          width: 55px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          padding: 3px;
          background-clip: content-box;
          border: 1px solid #333;
          margin: 0 3px;
  
          > img {
            width: 45px;
            height: 45px;
            display: block;
          }
  
          > span {
            color: red;
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  </style>
  